<style>
.zhuanpan{
  position:relative;
  width:472px;
}
.zhen{
  position:absolute;
  left:156px;
  top:143px;
}
#pan{
  transition:all 3s;
}
</style>

<div class="zhuanpan">
  <img class="pan" id="pan" src="1.png" />
  <img class="zhen" onclick="choujiang()" src="2.png" />
</div>

<script>
var yinyue = new Audio();
yinyue.src = "1.mp3";

var luckyNums = [3600,3600+90,3600+180,3600+270,
3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45,3600+45];

function choujiang(){
  var i = Math.floor(Math.random()*22);
  pan.style.transform = "rotate("+luckyNums[i]+"deg)";

  if(i>=4){
    yinyue.play();
  }
}
</script>









